

<template>
  <div id="myChart" :style="{width: '800px', height: '500px',background:'#f1f1f1'}"></div>

</template>


<script>
  import Vue from "vue"
  import echarts from 'echarts'
  import {listKneel} from "@/api/system/kneel"
  Vue.prototype.$echarts = echarts
  let myChart
  // function randomData() {
  //   now = new Date(+now + oneDay);
  //   value = value + Math.random() * 21 - 10;
  //   return {
  //     name: now.toString(),
  //     value: [
  //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
  //       Math.round(value)
  //     ]
  //   };
  // }

  function addData(shift) {

    if (shift) {
      date.shift();
      data1.shift();
      data2.shift();
    }
  }

  for (var i = 1; i < 5; i++) {
    addData();
  }

  let data1 = [];
  let data2 = [];
  let date = [];
  var colors = ['#5470C6', '#91CC75', '#EE6666'];
  let base = +new Date(1997, 9, 3);
  let oneDay = 24 * 3600 * 1000;
  var now = new Date(base);
  // let value = Math.random() * 1000;

  export default {
    name: 'hello',
    data () {
      return {
        kneelList:null,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          kneel: null,
          deviceId: null,
          userId: null,
          createTime: null,
          pain:null,
        },
        // 表单参数
        form: {},
      }
    },
    created() {
      this.getList();
    },
    mounted(){
      this.drawLine();
    },
    methods: {

      getList() {
        this.loading = true;
        console.log(this.$route.query.userId)
        listKneel(this.queryParams).then(response => {
          this.kneelList = response.rows;
          this.total = response.total;
          this.loading = false;


          for (let i=0;i<this.kneelList.length;i++){
            if (this.$route.query.userId == this.kneelList[i].userId) {
              // console.log(this.kneelList[i].pain);
              date.push(this.kneelList[i].createTime);
              data1.push(this.kneelList[i].kneel);
              data2.push(this.kneelList[i].pain);
            }
          }

        });
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        myChart= this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            // left: 'center',
            text: '屈膝度及疼痛度变化图'
          },
          color: colors,
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {
            data: ['屈膝度', '疼痛度']
          },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            boundaryGap: false,
            // type: 'time',
            // splitLine: {
            //   show: false
            // },
            data:date,
          },
          yAxis: [
            {
              name:'屈膝度',
              type: 'value',
              min: 0,
              max: 150,
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[2]
                }
              },
              axisLabel: {
                formatter: '{value} °'
              },

              // boundaryGap: [0, '100%'],
              // splitLine: {
              //   show: false
              // }
            },
            {
              type: 'value',
              name: '疼痛度',
              min: 0,
              max: 10,
              position: 'right',
              // offset: 80,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisLabel: {
                formatter: '{value} 级'
              },
              // splitLine: {
              //   show: false
              // }
            }
          ],
          series: [
            {
              name: '屈膝度',
              type: 'line',
              smooth:true,

              // symbol: 'none',
              stack: 'a',
              //填充
              // areaStyle: {
              //   normal: {}
              // },

              lineArea: {
                show: true,
                gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
              },
              lineStyle: {
                stroke: 'rgba(251, 114, 147, 1)',
                lineDash: [3, 3]
              },
              linePoint: {
                style: {
                  stroke: 'rgba(251, 114, 147, 1)'
                }
              },
              // showSymbol: false,
              // hoverAnimation: false,
              data: data1
            },
            {
              name: '疼痛度',
              type: 'line',
              // symbol: 'none',
              smooth:true,
              // stack: 'a',
              //填充
              // areaStyle: {
              //   normal: {}
              // },

              // showSymbol: false,
              // hoverAnimation: false,
              yAxisIndex: 1,
              data: data2
            },
          ]
        });
      }
    }
  }



  setInterval(function () {

    // console.log("123"+this.temperatureList);
    addData(true);
    myChart.setOption({
      xAxis: {
        data: date
      },
      series: [
        {
          name:'屈膝度',
          data: data1
        },
        {
          name:'疼痛度',
          data: data2
        }
      ]
    });
  }, 2500);
</script>

